
import {  View } from '@tarojs/components'
import { useEffect, useState } from 'react'
import $style from './index.module.scss'

interface Props {
    loading : boolean;
    [key:string]:any;
}

export default (props:Props) => {
    let [current, setcurrent] = useState(0)
    useEffect(() => {
        let inter = setInterval(() => {
            if (current >= 3) {
                current = 0
            } else {
                current ++
            }
            setcurrent(current)
        }, 500)

        return () => {
            clearInterval(inter)
        }

    }, [])

    

    return <View className={$style.page}>
        <View className={$style.wait}>
            <View className={$style.wrap}>
                {props.loading
                ?    <View className={$style.twinkle}>
                        <View className={$style.spot + ' ' + (current == 0 ? $style.current : '')} style='background:#428cf6;'></View>
                        <View className={$style.spot + ' ' + (current == 1 ? $style.current : '')} style='background:#f14239;'></View>
                        <View className={$style.spot + ' ' + (current == 2 ? $style.current : '')} style='background:#ffbd00;'></View>
                        <View className={$style.spot + ' ' + (current == 3 ? $style.current : '')} style='background:#31ad52;'></View>
                    </View>
                
                :   <>
                        {props.children
                        ? props.children
                        : <View className={$style.defaultResult}>请求失败</View>
                        }
                    </>
                }
                {/* <View className={$style.twinkle}>
                    <View className={$style.spot + ' ' + (current == 0 ? $style.current : '')} style='background:#428cf6;'></View>
                    <View className={$style.spot + ' ' + (current == 1 ? $style.current : '')} style='background:#f14239;'></View>
                    <View className={$style.spot + ' ' + (current == 2 ? $style.current : '')} style='background:#ffbd00;'></View>
                    <View className={$style.spot + ' ' + (current == 3 ? $style.current : '')} style='background:#31ad52;'></View>
                </View> */}
            </View>
        </View>
    </View>
}